<template>
  <div class="manage">
    <el-drawer
        title="工单流转流程"
        :visible.sync="drawer"
        size="80%"
        style="text-align: center;font-weight: bold"
        :before-close="handleClose"
        :destroy-on-close="true"
    >
      <div class="drawerContainer">
        <div class="head">
          <el-card shadow="hover">
            <div class="title">
              <div class="icon"></div>
              <span>工单详情</span>
            </div>
            <div class="containerBox">
              <el-table
                  stripe
                  border
                  size="mini"
                  :default-expand-all="true"
                  :data="tableDataDetail"
                  style="width: 100%">
                <el-table-column type="expand" fixed>
                  <template slot-scope="props" >
                    <el-form label-position="left"   class="demo-table-expand">
                      <div>
                        <el-form-item label="标题" style="width: 1116px">
                          <span>{{ props.row.task_title }}</span>
                        </el-form-item>
                      </div>
                      <div>
                        <el-form-item label="场所或施工项目名称"  style="width: 1116px">
                          <span>{{ props.row.task_name}}</span>
                        </el-form-item>
                      </div>
                      <div>
                        <el-form-item label="问题及隐患详情"  style="width: 1116px">
                          <span>{{ props.row.task_content }}</span>
                        </el-form-item>
                      </div>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="工单编号"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="task_title"
                    label="标题"
                    align="center"
                    width="300px"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="task_inspection_time"
                    label="检查时间"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="task_anticipate_time"
                    label="规定整改完成时间"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="task_type__type"
                    label="隐患类型"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="task_type__area"
                    label="隐患领域"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="task_dept__deptname"
                    label="责任部门"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="task_dept__safeer__name"
                    label="安全员"
                    align="center"
                >
                  <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.task_dept__safeer__name }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="task_dept__depthearder__name"
                    label="负责人"
                    align="center"
                >
                  <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium" type="success">{{ scope.row.task_dept__depthearder__name }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态"
                    align="center"
                >
                  <template slot-scope="scope">
            <span :style="{color:classObject(scope.row.status)}"
            >
              {{transform(scope.row.status)}}
            </span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="task_level"
                    label="风险等级"
                    align="center"
                >
                  <template slot-scope="scope">
            <span :style="{ color: scope.row.task_level ==='一般' ? 'brown' :'red'}"
            >
              {{scope.row.task_level}}
            </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="title">
              <div class="icon"></div>
              <span>隐患照片</span>
            </div>
            <div class="containerBox">
              <div v-for="(item,index) in imageList" :key="index" class="itemBox">
                <el-image
                    style="width: 200px; height: 200px"
                    fit="contain"
                    :src="'http://134.68.156.116:28881/yaq/api/media/'+item.image"
                    :preview-src-list="srcList"
                >
                </el-image>
              </div>
            </div>
            <div class="title">
              <div class="icon"></div>
              <span>整改反馈</span>
            </div>
            <div class="containerBox">
              <el-table
                  stripe
                  max-height="1000px"
                  border
                  size="mini"
                  :data="rectification"
                  style="width: 100%"
              >
                <el-table-column
                    prop="order_date"
                    fixed
                    label="整改时间"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="order_plan"
                    label="反馈内容"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="desc"
                    label="备注"
                    align="center"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="title">
              <div class="icon"></div>
              <span>整改照片</span>
            </div>
            <div class="containerBox">
              <div v-for="(item,index) in imageNewList" :key="index" class="itemBox">
                <el-image
                    style="width: 200px; height: 200px"
                    fit="contain"
                    :src="'http://134.68.156.116:28881/yaq/api/media/'+item.image"
                    :preview-src-list="srcListNew"
                >
                </el-image>
              </div>
            </div>
            <div class="title">
              <div class="icon"></div>
              <span>流转记录</span>
            </div>
            <div class="containerBox">
              <el-table
                  stripe
                  max-height="1500px"
                  border
                  size="mini"
                  :data="data_order"
                  style="width: 100%"
              >
                <el-table-column
                    prop="create_date"
                    fixed
                    label="工单到达时间"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="end_date"
                    label="工单处理时间"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="link"
                    label="环节"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                      <span :style="{ color: classObjectProcedure(scope.row.link)}"
                      >
                        {{transformProcedure(scope.row.link)}}
                      </span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="link_status"
                    label="完成情况"
                    align="center"
                >
                  <template slot-scope="scope">
                      <span :style="{ color: scope.row.link_status ===true?'green':'red'}"
                      >
                        {{scope.row.link_status ===true?'已完成':'未完成'}}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="handle_user__name"
                    label="处理人"
                    align="center"
                >
                  <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.handle_user__name }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="suggestion"
                    label="处理意见"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="result"
                    label="处理结果"
                    align="center"
                >
                  <template slot-scope="scope">
                      <span :style="{ color: scope.row.result ===true?'green':'red'}"
                      >
                        {{scope.row.result ===true?'同意':(scope.row.result ===null?'':'驳回')}}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </div>
    </el-drawer>
    <div class="manage-header">
      <el-form :inline="true" :model="userForm" size="mini">
        <el-form-item label="责任部门：" prop="deptname" v-if="isAdmin">
          <el-select v-model="userForm.deptname" placeholder="请选择责任部门">
            <el-option label="所有部门" value=""></el-option>
            <el-option
                v-for="item in deptList"
                :key="item"
                :label="item"
                :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model="userForm.status" placeholder="请选择状态">
            <el-option
                v-for="item in statusList"
                :key="item.id"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择日期：" prop="date">
          <el-date-picker
              v-model="value"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSubmit" size="mini">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-if="isAdmin" @click="exportExcel" size="mini">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-table">
      <el-table
          stripe
          height="90%"
          border
          size="mini"
          :data="tableData"
          style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="工单编号"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="task_title"
            label="标题"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="task_dept__safeer__name"
            label="安全员"
            align="center"
        >
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.task_dept__safeer__name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="task_dept__depthearder__name"
            label="负责人"
            align="center"
        >
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" type="success">{{ scope.row.task_dept__depthearder__name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="task_name"
            label="场所或施工项目名称"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="task_content"
            label="问题及隐患详情"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="task_inspection_time"
            label="检查时间"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="task_anticipate_time"
            label="规定整改完成时间"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="task_type__type"
            label="隐患类型"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="task_type__area"
            label="隐患领域"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="task_dept__deptname"
            label="责任部门"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            align="center"
        >
          <template slot-scope="scope">
            <span :style="{color:classObject(scope.row.status)}"
            >
              {{transform(scope.row.status)}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
            prop="task_level"
            label="风险等级"
            align="center"
        >
          <template slot-scope="scope">
            <span :style="{ color: scope.row.task_level ==='一般' ? 'green' :'red'}"
            >
              {{scope.row.task_level}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="200px"
        >
          <template slot-scope="scope">
            <el-button type="success"
                       icon="el-icon-more"
                       size="mini"
                       @click="edit(scope.row.id)">
              详情
            </el-button>
            <el-button v-if="isAdmin"
                       type="danger"
                       icon="el-icon-delete"
                       size="mini"
                       @click="deleteTask(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginations.current"
            :page-sizes="[5 ,10, 20, 50, 100]"
            :page-size="paginations.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paginations.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {deptInfo} from "@/api/dept";
import {downloadExcel, taskInfo, taskList,deleteTask} from "@/api/task";
import Cookies from "js-cookie";
export default {
  name: "AllWorkOrder",
  data(){
    return{
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value:'',
      drawer:false,
      isAdmin:false,
      fileList:[],
      data_order:[],
      orderList:[],
      srcList:[],
      imageList:[],
      imageNewList:[],
      rectification:[],
      srcListNew:[],
      opinionList:[
        {
          label:'同意',
          value:1
        },
        {
          label:'驳回',
          value: 0
        }
      ],
      deptList:[],
      statusList:[
        {
          id:0,
          label: '所有状态',
          value: ''
        },
        {
          id:1,
          label:'待发起',
          value:[1]
        },
        {
          id:2,
          label:'待安保部领导审核',
          value:[2]
        },
        {
          id:3,
          label:'待安全员接单',
          value:[3]
        },
        {
          id:4,
          label:'待安全员反馈',
          value:[4]
        },
        {
          id:5,
          label:'待负责人审核',
          value:[5]
        },
        {
          id:6,
          label:'待工单发起人审核',
          value:[6]
        },
        {
          id:7,
          label:'已归档',
          value:[7]
        }
      ],
      tableData: [],
      tableDataDetail:[],
      paginations: {
        current: 1, //当前页
        pageSize: 10, //一页显示多少条
        total: 0 //数据总数
      },
      userForm: {
        deptname:'',
        status:''
      }
    }
  },
  mounted() {
    this.created();
  },
  methods: {
    created() {
      let _this = this;
      deptInfo({}).then(resp=>{
        if(resp.code===1){
          let params = {
            page_number: 1,
            page_size:resp.total_count,
            status: true
          }
          deptInfo(params).then(res=>{
            let temp = res.data
            for(let i = 0;i<temp.length;i++){
              _this.deptList = [..._this.deptList,temp[i].deptname]
            }
            console.log(_this.deptList)
          })

        }
      })
      if(Cookies.get('role') ==='管理员') {
        this.isAdmin = true
        // this.userForm.status = [5]
      }
      // else if (Cookies.get('role') ==='负责人') {
      //   if(Cookies.get('name')==='郭贵平'){
      //     this.userForm.status = [1]
      //   }else{
      //     this.userForm.status = [4]
      //   }
      // }else {
      //   this.userForm.status = [2]
      // }
      this.getList()
    },
    //弹窗关闭的时候
    handleClose (done) {
      this.$confirm('确定关闭吗？')
          .then(()=> {
            this.srcList = []
            this.srcListNew = []
            this.imageList = []
            this.orderList = []
            this.rectification = []
            this.imageNewList = []
            this.data_order = []
            done();
          })
          .catch(()=> {});
    },
    classObject(status){
      if(status===2) {
        return 'orange'
      }else if(status===3){
        return 'brown'
      }else if(status===4){
        return 'red'
      }else if(status===5){
        return 'blue'
      }else if(status===6){
        return 'purple'
      }else{
        return 'green'
      }
    },
    classObjectProcedure(link){
      if(link===2) {
        return 'orange'
      }else if(link===3){
        return 'brown'
      }else if(link===4){
        return 'red'
      }else if(link===5){
        return 'blue'
      }else if(link===6){
        return 'purple'
      }else{
        return 'green'
      }
    },
    transformProcedure(val){
      let list = [
        {
          id:1,
          label:'起草',
          value:1
        },
        {
          id:2,
          label:'安保部领导审核',
          value:2
        },
        {
          id:3,
          label:'安全员接单',
          value:3
        },
        {
          id:4,
          label:'安全员反馈',
          value:4
        },
        {
          id:5,
          label:'负责人审核',
          value:5
        },
        {
          id:6,
          label:'发起人审核',
          value:6
        },
        {
          id:7,
          label:'归档',
          value:7
        }
      ]
      return list.filter(ele=>(ele.value === val))[0].label
    },
    transform(val){
      let list = [
        {
          id:1,
          label:'待发起',
          value:1
        },
        {
          id:2,
          label:'待安保部领导审核',
          value:2
        },
        {
          id:3,
          label:'待安全员接单',
          value:3
        },
        {
          id:4,
          label:'待安全员反馈',
          value:4
        },
        {
          id:5,
          label:'待负责人审核',
          value:5
        },
        {
          id:6,
          label:'待工单发起人审核',
          value:6
        },
        {
          id:7,
          label:'已归档',
          value:7
        }
      ]
      return list.filter(ele=>(ele.value === val))[0].label
    },
    //分页方法
    handleCurrentChange(val) {
      this.paginations.current = val
      this.getList();
    },
    handleSizeChange(val) {
      this.paginations.pageSize = val
      this.getList();
    },
    //获取的列表数据
    getList () {
      //获取的列表数据
      let params = {
        deptname:this.userForm.deptname,
        status:this.userForm.status,
        starttime:this.value[0],
        endtime:this.value[1],
        page_number:this.paginations.current,
        page_size:this.paginations.pageSize
      }
      taskList(params).then(resp => {
        if (resp.code === 1) {
          this.tableData = resp.data
          this.paginations.total = resp.total_count
        }
      })

    },
    //列表的查询
    onSubmit () {
      this.getList()
    },
    edit(id){
      this.drawer = true
      taskInfo({task_id:id}).then(res=>{
        if(res.code===1){
          let temp = res.data_task[0]
          this.tableDataDetail = res.data_task
          this.rectification = res.rectification
          this.data_order = res.data_order
          console.log(this.rectification)
          this.orderList = [
            {
              label:'工单编号',
              value:temp.id
            },
            {
              label:'标题',
              value:temp.task_title
            },
            {
              label:'发单人',
              value:temp.task_owner__name
            },
            {
              label:'负责人',
              value:temp.task_dept__depthearder__name
            },
            {
              label:'安全员',
              value:temp.task_dept__safeer__name
            },
            {
              label:'隐患类型',
              value:temp.task_type__type
            },
            {
              label:'隐患领域',
              value:temp.task_type__area
            },
            {
              label:'风险隐患等级',
              value:temp.task_level
            },
            {
              label:'检查时间',
              value:temp.task_inspection_time
            },
            {
              label:'规定整改完成时间',
              value:temp.task_anticipate_time
            },
            {
              label:'状态',
              value:this.transform(temp.status)
            },
            {
              label:'场所或施工项目名称',
              value:temp.task_name
            },
            {
              label:'问题及隐患详情',
              value:temp.task_content
            },
          ]
          this.imageList = res.image_before
          for(let i= 0;i<this.imageList.length;i++){
            this.srcList.push('http://134.68.156.116:28881/yaq/api/media/'+this.imageList[i].image)
          }
          this.imageNewList = res.image_after
          for(let j =0;j<this.imageNewList.length;j++){
            this.srcListNew.push('http://134.68.156.116:28881/yaq/api/media/'+this.imageNewList[j].image)
          }
        }
      })
    },
   exportExcel() {
      let params = {
        deptname:this.userForm.deptname,
        status:this.userForm.status,
        starttime:this.value[0],
        endtime:this.value[1]
      }
      downloadExcel(params).then(res=>{
        this.exportFile(res,params.deptname+params.starttime+'-'+params.endtime+'.xlsx')
      })
    },
    exportFile(content, customFileName) {
      let filename = content.filename || customFileName;
      let URL = window.URL || window.webkitURL;
      let objectUrl = URL.createObjectURL(content);
      let a = document.createElement("a");
      a.href = objectUrl;
      a.download = filename; //这步要注意 filename要写成 '文件名.xlsx'
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    deleteTask(id){
      this.$confirm('此操作将永久删除该工单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          task_id:id
        }
        deleteTask(params).then(res=>{
          if(res.code===1){
            this.$message.success(res.message)
            this.getList()
          }else{
            this.$message.error(res.message)
            this.getList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style lang="less" scoped>
.manage{
  height: 100%;
  .drawerContainer{
    //text-align: center;
    color: #fff;
    padding: 10px;
    font-size: 25px;
    .head{
      .title {
        display: flex;
        width: 100%;
        font-weight: 600;
        font-size: 15px;
        line-height: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e8e8e8;
        margin-bottom: 15px;
        .icon {
          width: 5px;
          height: 15px;
          background-color: rgb(146, 198, 222);
          margin-right: 5px;
        }
      }
      .containerBox {
        display: flex;
        justify-content: flex-start;
        //align-items: center;
        flex-wrap: wrap;
        margin-bottom: 16px;
        box-sizing: border-box;
        padding: 0 10px;
        .itemBox1 {
          width: 33.3%;
          margin-bottom: 15px;
          font-size: 14px;
          .itemLeft1 {
            color: rgba(0, 0, 0, 0.55);
          }
          .itemRight1 {
            color: rgba(0, 0, 0, 0.95);
          }
        }
        .itemBox {
          width: 33.3%;
          margin-bottom: 15px;
          font-size: 14px;
          .itemLeft {
            color: rgba(0, 0, 0, 0.55);
          }
          .itemRight {
            color: rgba(0, 0, 0, 0.95);
          }
        }
      }
    }
  }
  .el-upload__tip{
    color: orangered;
  }
  .manage-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px dotted lightgrey;
  }
  .common-table{
    margin-top: 20px;
    position: relative;
    height: 90%;
    .pager{
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
}
</style>
<style>
.demo-table-expand {
  /*font-size: 0;*/
  /*margin-left: 15em;*/
  //width: 75%;
  //margin: 0 12.5%;
  margin: 20px;
}
.demo-table-expand label {
  width: 11em;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  //padding: 1em;
  margin-right: 0;
  margin-bottom: 0;
}
</style>
